<template>

  <!--  <el-dialog :title="title"-->
  <!--             top="10vh"-->
  <!--             :model-value="visible"-->
  <!--             :before-close="onClose"-->
  <!--             :append-to-body="true"-->
  <!--             :close-on-click-modal="false"-->
  <!--             :width="width + 'vw'">-->

  <el-dialog :title="title"
             :model-value="visible"
             :width="width + 'vw'"
             top="10vh"
             :before-close="onClose"
             :close-on-click-modal="true"
             :close-on-press-escape="true"
             :append-to-body="true"
             :draggable="true"
             :destroy-on-close="true">

    <el-scrollbar :style="{height:height + 'vh'}">
      <div class="container">
        <slot name="content"></slot>
      </div>
    </el-scrollbar>


    <template #footer>
      <span class="dialog-footer">
      <el-button size="default" class=" fly-popup-btn" :icon="Close" v-if="showClose" @click="onClose">取消</el-button>
      <el-button size="default" class=" fly-popup-btn" :icon="Check" v-if="showSubmit" type="primary"
                 @click="onSubmit">提交</el-button>
      </span>
    </template>


  </el-dialog>


</template>
<script setup lang="ts">

import {Close, Check} from '@element-plus/icons-vue';

const props = defineProps({
  title: {
    type: String,
    default: '表单',
  },
  visible: {
    type: Boolean,
    default: false,
  },
  width: {
    type: Number,
    default: 55,
  },
  height: {
    type: Number,
    default: 55,
  },
  showSubmit: {
    type: Boolean,
    default: true,
  },
  showClose: {
    type: Boolean,
    default: true,
  }
})

let emits = defineEmits(['submit', 'close'])


// 提交
const onSubmit = () => {
  emits('submit')
}

// 取消
const onClose = () => {
  emits('close')
}


</script>
<style>



.fly-popup-btn .el-icon {
  margin-right: 0 !important;
}


</style>